import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
import { useUser } from '../core/UserContext';

const Navbar: React.FC = () => {
  const { email, logout } = useUser();
  const [showUserMenu, setShowUserMenu] = useState(false);

  const handleCopyUrl = () => {
    navigator.clipboard.writeText(window.location.href);
    alert('链接已复制到剪贴板！');
  };

  const handleLogout = () => {
    logout();
    setShowUserMenu(false);
  };

  return (
    <nav className="navbar">
      <div className="navbar-brand">
        <Link to="/" className="brand-link">
          <h1>二元故事电商</h1>
        </Link>
      </div>
      <div className="navbar-actions">
        <button className="nav-button" onClick={handleCopyUrl}>
          复制网址
        </button>
        {email ? (
          <div className="user-menu-container">
            <button 
              className="nav-button user-button"
              onClick={() => setShowUserMenu(!showUserMenu)}
            >
              {email}
            </button>
            {showUserMenu && (
              <div className="user-menu">
                <button onClick={handleLogout}>退出登录</button>
              </div>
            )}
          </div>
        ) : (
          <Link to="/login" className="nav-button login-button">
            登录/注册
          </Link>
        )}
      </div>
    </nav>
  );
};

export default Navbar; 